<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布新主题 - 星露谷攻略论坛</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f9fafb;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 4rem;
            padding: 0 1rem;
        }
        .navbar-brand {
            display: flex;
            align-items: center;
        }
        .navbar-logo {
            height: 2rem;
            width: auto;
        }
        .navbar-title {
            margin-left: 0.5rem;
            font-size: 1.25rem;
            font-weight: bold;
            color: #059669;
        }
        .navbar-nav {
            display: none;
        }
        .nav-link {
            color: #6b7280;
            text-decoration: none;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-bottom: 2px solid transparent;
        }
        .nav-link.active, .nav-link:focus {
            color: #111827;
            border-bottom-color: #059669;
        }
        .nav-link:hover {
            color: #374151;
            border-bottom-color: #d1d5db;
        }
        .login-btn {
            background-color: #059669;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
        }
        .login-btn:hover {
            background-color: #047857;
        }
        /* 主体布局 */
        .main-content {
            padding: 2rem 0;
        }
        .content-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 1024px) {
            .content-grid {
                grid-template-columns: 2fr 1fr;
            }
            .sidebar {
                margin-top: 0;
            }
        }
        /* 发帖表单 */
        .post-form-card {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .post-form-content {
            padding: 1.5rem;
        }
        .form-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #111827;
            margin-bottom: 1.5rem;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-label {
            display: block;
            font-size: 0.95rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
        }
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: #059669;
            box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
        }
        .form-radio-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .form-radio {
            display: flex;
            align-items: center;
        }
        .form-radio input[type="radio"] {
            width: 1rem;
            height: 1rem;
            accent-color: #059669;
        }
        .form-radio label {
            margin-left: 0.5rem;
            font-size: 0.95rem;
            color: #374151;
        }
        .form-tip {
            font-size: 0.85rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }
        /* 编辑器 */
        .editor-toolbar {
            border: 1px solid #e5e7eb;
            border-bottom: none;
            border-top-left-radius: 0.375rem;
            border-top-right-radius: 0.375rem;
            background-color: #f3f4f6;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .editor-toolbar button {
            background: none;
            border: none;
            color: #6b7280;
            border-radius: 0.375rem;
            padding: 0.5rem;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        .editor-toolbar button:hover {
            background: #e5e7eb;
            color: #059669;
        }
        .editor-content {
            border: 1px solid #e5e7eb;
            border-bottom-left-radius: 0.375rem;
            border-bottom-right-radius: 0.375rem;
        }
        .form-textarea {
            min-height: 10rem;
            resize: vertical;
        }
        /* 发布选项 */
        .form-options {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 1.5rem;
        }
        .form-checkbox {
            width: 1rem;
            height: 1rem;
            accent-color: #059669;
        }
        .form-checkbox-label {
            margin-left: 0.5rem;
            font-size: 0.95rem;
            color: #374151;
        }
        /* 发布按钮组 */
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }
        .btn {
            padding: 0.5rem 1.25rem;
            border-radius: 0.375rem;
            font-size: 0.95rem;
            font-weight: 500;
            border: 1px solid #d1d5db;
            background: white;
            color: #374151;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        .btn:hover {
            background: #f3f4f6;
        }
        .btn-primary {
            background: #059669;
            color: white;
            border: none;
        }
        .btn-primary:hover {
            background: #047857;
        }
        /* 侧边栏 */
        .sidebar {
            margin-top: 2rem;
        }
        .sidebar-card {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            overflow: hidden;
            margin-bottom: 2rem;
        }
        .sidebar-content {
            padding: 1.5rem;
        }
        .sidebar-title {
            font-size: 1.125rem;
            font-weight: 500;
            color: #111827;
            margin-bottom: 1rem;
        }
        .sidebar-list {
            list-style: disc inside;
            padding-left: 0;
            margin: 0;
        }
        .sidebar-list li {
            font-size: 0.95rem;
            color: #374151;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: flex-start;
        }
        .sidebar-list svg {
            margin-right: 0.5rem;
            min-width: 1.25rem;
        }
        .sidebar-list .text-green-500 {
            color: #059669;
        }
        .sidebar-list .text-red-500 {
            color: #ef4444;
        }
        /* 页脚 */
        .footer {
            background-color: white;
            margin-top: 3rem;
            padding: 3rem 0;
        }
        .footer-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: -0.5rem -1.25rem;
        }
        .footer-link {
            padding: 0.5rem 1.25rem;
            color: #6b7280;
            text-decoration: none;
            font-size: 1rem;
        }
        .footer-link:hover {
            color: #111827;
        }
        .footer-copyright {
            text-align: center;
            color: #9ca3af;
            font-size: 1rem;
            margin-top: 2rem;
        }
        @media (min-width: 640px) {
            .navbar-nav {
                display: flex;
                gap: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container navbar-content">
            <div class="navbar-brand">
                <img class="navbar-logo" src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?w=500&auto=format&fit=crop&q=60" alt="星露谷论坛">
                <span class="navbar-title">星露谷论坛</span>
            </div>
            <div class="navbar-nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="guides.html" class="nav-link">攻略中心</a>
                <a href="community.html" class="nav-link">社区讨论</a>
                <a href="wiki.html" class="nav-link">资料库</a>
            </div>
            <button class="login-btn">登录/注册</button>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container main-content">
        <div class="content-grid">
            <!-- 发帖表单 -->
            <div>
                <div class="post-form-card">
                    <div class="post-form-content">
                        <h1 class="form-title">发布新主题</h1>
                        <!-- 标题输入 -->
                        <div class="form-group">
                            <label for="title" class="form-label">标题</label>
                            <input type="text" id="title" class="form-input" placeholder="请输入标题（5-100字）">
                        </div>
                        <!-- 分类选择 -->
                        <div class="form-group">
                            <label class="form-label">分类</label>
                            <div class="form-radio-group">
                                <div class="form-radio">
                                    <input type="radio" id="discussion" name="category">
                                    <label for="discussion">讨论</label>
                                </div>
                                <div class="form-radio">
                                    <input type="radio" id="question" name="category">
                                    <label for="question">提问</label>
                                </div>
                                <div class="form-radio">
                                    <input type="radio" id="share" name="category">
                                    <label for="share">分享</label>
                                </div>
                                <div class="form-radio">
                                    <input type="radio" id="other" name="category">
                                    <label for="other">其他</label>
                                </div>
                            </div>
                        </div>
                        <!-- 标签输入 -->
                        <div class="form-group">
                            <label for="tags" class="form-label">标签</label>
                            <input type="text" id="tags" class="form-input" placeholder="请输入标签，用逗号分隔">
                            <p class="form-tip">最多添加5个标签，每个标签不超过10个字</p>
                        </div>
                        <!-- 内容编辑器 -->
                        <div class="form-group">
                            <label class="form-label">内容</label>
                            <div class="editor-toolbar">
                                <button><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
                                <button><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></button>
                                <button><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></button>
                            </div>
                            <div class="editor-content">
                                <textarea class="form-textarea" rows="15" placeholder="请输入正文内容..."></textarea>
                            </div>
                        </div>
                        <!-- 发布选项 -->
                        <div class="form-options">
                            <div class="form-radio">
                                <input type="checkbox" id="anonymous" class="form-checkbox">
                                <label for="anonymous" class="form-checkbox-label">匿名发布</label>
                            </div>
                            <div class="form-radio">
                                <input type="checkbox" id="notification" class="form-checkbox">
                                <label for="notification" class="form-checkbox-label">接收回复通知</label>
                            </div>
                        </div>
                        <!-- 发布按钮 -->
                        <div class="form-actions">
                            <button class="btn">保存草稿</button>
                            <button class="btn btn-primary">发布主题</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧边栏 -->
            <div class="sidebar">
                <!-- 发帖提示 -->
                <div class="sidebar-card">
                    <div class="sidebar-content">
                        <h3 class="sidebar-title">发帖提示</h3>
                        <ul class="sidebar-list">
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>标题要简洁明了，突出主题</li>
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>选择合适的分类，方便他人查找</li>
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>添加相关标签，提高曝光度</li>
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>内容要详细具体，便于交流</li>
                        </ul>
                    </div>
                </div>
                <!-- 社区规范 -->
                <div class="sidebar-card">
                    <div class="sidebar-content">
                        <h3 class="sidebar-title">社区规范</h3>
                        <ul class="sidebar-list">
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>禁止发布广告、色情、暴力等内容</li>
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>禁止人身攻击和恶意评论</li>
                            <li><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>禁止发布与游戏无关的内容</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <nav class="footer-nav">
                <a href="#" class="footer-link">关于我们</a>
                <a href="#" class="footer-link">使用条款</a>
                <a href="#" class="footer-link">隐私政策</a>
                <a href="#" class="footer-link">联系我们</a>
            </nav>
            <p class="footer-copyright">
                &copy; 2024 星露谷攻略论坛. All rights reserved.
            </p>
        </div>
    </footer>
</body>
</html> 